<template>
    <div class="container">
        <CategoryList title="foods">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </CategoryList>
        <CategoryList title="games">
            <ul>
                <li v-for="(game,index) in games" :key="index"> {{ game }}</li>
            </ul>
        </CategoryList>
        <CategoryList title="films">
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </CategoryList>
    </div>
</template>

<script>
import CategoryList from "@/components/CountNumber.vue";

export default {
    name: "App",
    components: {CategoryList},
    data() {
        return {
            foods: ["火锅", "烧烤", "小龙虾", "牛排"],
            games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
            films: ["《教父》", "《拆弹专家》", "《你好，李焕英》", "《尚硅谷》"],
        }
    }
}
</script>

<style>
.container {
    display: flex;
    justify-content: space-around;
}

img {
    width: 100%;
}

video {
    width: 100%;
}
</style>